<template>
  <div class="waterAnalysisTab">
    <div class="waterAnalysisTabTop">
      <!-- <waterAnalysisTabTopLeft class="waterAnalysisTabTopLeft" :userCode='userCode' :key="userCodeKey"></waterAnalysisTabTopLeft> -->
      <examineWater
        class="examineWater"
        :userCode="userCode"
        :key="userCodeKey"
      ></examineWater>
      <dailyWaterStatistics
        class="dailyWaterStatistics"
        :userCode="userCode"
        :key="userCodeKeys"
        :waterNo="waterNo"
        :communityCode="communityCode"
      ></dailyWaterStatistics>
    </div>
    <div class="waterAnalysisTabBottom">
      <waterUseCurveAnalysis
        class="waterUseCurveAnalysis"
        :userCode="userCode"
        :key="userCodeKeyss"
        :waterNo="waterNo"
      ></waterUseCurveAnalysis>
    </div>
  </div>
</template>

<script>
// 日用水情况统计
import dailyWaterStatistics from "./compotents/dailyWaterStatistics";
// 阶梯用水曲线分析
import waterUseCurveAnalysis from "./compotents/waterUseCurveAnalysis";
// 用户用水分析信息列表
// import waterAnalysisTabTopLeft from './compotents/waterAnalysisTabTopLeft'
import examineWater from "./compotents/examineWater";
export default {
  props: ["userCode", "waterNo", "communityCode"],
  components: {
    dailyWaterStatistics,
    waterUseCurveAnalysis,
    // waterAnalysisTabTopLeft,
    examineWater,
  },
  name: "waterAnalysisTab",
  data() {
    return {
      userCodeKey: 0,
      userCodeKeys: 0,
      userCodeKeyss: 0,
    };
  },
  methods: {},
  watch: {
    userCode(newValue) {
      this.areaCode = newValue;
      this.userCodeKey = this.userCodeKey + 1;
      this.userCodeKeys = this.userCodeKeys + 1;
      this.userCodeKeyss = this.userCodeKeyss + 1;
    },
    waterNo(newValue) {
      this.waterNo = newValue;
    },
    communityCode(newValue) {
      this.communityCode = newValue;
    },
  },
};
</script>

<style scoped lang="scss">
.waterAnalysisTab {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  .waterAnalysisTabTop {
    // min-height: 37vh;
    display: flex;
    flex: 0 0 50%;
    .examineWater {
      // width: 550px;
      flex: 0 0 20%;
    }
    .dailyWaterStatistics {
      // width: 900px;
      flex: 0 0 80%;
    }
  }
  .waterAnalysisTabBottom {
    flex: 0 0 50%;
    // height: 63vh;
    .waterUseCurveAnalysis {
      // margin-top: 100px;
    }
  }
}
</style>
